﻿<!--
    This file is part of WWW-Helper.

    WWW-Helper is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    WWW-Helper is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with WWW-Helper.  If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<meta charset="UTF-8" />
<title>WWW-Helper - Sentences</title>
<script type="text/javascript">
//EVEN OR NOT?
var even_odd=confirm("Would you like to do evens or odds?\n\nOK: Odds; Cancel: Evens");

var dList=new Array();
function getDictionary(word) {
  if (!dList[word]) {
    var xhr=new XMLHttpRequest;
    try {
      xhr.open("GET","http://api-pub.dictionary.com/v001?vid=l0ykr0zmp8y155eskjc7drdqbsb2nmd9mbtebt101z&type=define&site=dictionary&q="+word,false);
    }
    catch(e) {
      console.log(e);
    }
    xhr.send();
    if (xhr.status==200) {
      parseDictionary(xhr.responseXML);
    }
    else {
      var error="Error: could not connect to Dictionary.com API"
      console.log(error);
    }
  }
  return dList[word];
}
function parseDictionary(xml) { //naming is nonsense...
  var defs=new Array();
  var entries=xml.getElementsByTagName("entry");
  for (i=0;i<entries.length;i++) {
    var def=new Array();
    //entry name, part of speech, definition
    def[0]=entries[i].getElementsByTagName("display_form")[0].childNodes[0].nodeValue;
    var deflist=entries[i].getElementsByTagName("def");
    for (j=0;j<deflist.length;j++) { //so if an entry has more than one def they become seperate entries
      def[1]=entries[i].getElementsByTagName("def")[j].childNodes[0].nodeValue;
      try { def[2]="("+entries[i].getElementsByTagName("def")[j].parentNode.parentNode.attributes["pos"].nodeValue+")"; }
      catch(e) { def[2]=""; }
      defs.push(def.slice(0));
    }
  }
  var word=xml.getElementsByTagName("dictionary")[0].attributes.getNamedItem("query").nodeValue; 
  if (entries.length==0) {
    defs[0]=new Array();
    defs[0][0]=word;
    defs[0][1]="no results found";
    defs[0][2]="";
  }
  dList[word]=defs.slice(0);
}

function validate(event,_this) { //clears box to only text and <b> and <i> tags
_this=_this||this;
  for (i=0;i<_this.childNodes.length;i++) {
    var currentNode=_this.childNodes[i];
    if (currentNode.nodeType!=3&&currentNode.nodeName!="B"&&currentNode.nodeName!="STRONG"&&currentNode.nodeName!="I") {
      var x=0;
      var xc=currentNode.childNodes.length;
      while (x<xc) {
        _this.insertBefore(currentNode.childNodes[0],currentNode);
        x++;
      }
      _this.removeChild(currentNode);
      i--;
    }
    else if (currentNode.nodeName=="B"||currentNode.nodeName=="STRONG"||currentNode.nodeName=="I") {
      validate(undefined,currentNode);
    }
  }
  _this.normalize();
}
function sentences() { //because we don't want that many api fetches (instant? no way!)

  //I guess now we detect the boldies...
  //array is this.words
  //also get definitions...
  this.words=new Array;
  var bolded=this.getElementsByTagName('b');
  if (bolded.length==0) bolded=this.getElementsByTagName('strong');
  for (i=0;i<bolded.length;i++) {
    var bolds=bolded[i].innerHTML.split(" ");
    for (j=0;j<bolds.length;j++) {
      this.words.push(bolds[j]);
    }
  }

  //now get definitions
  //this.defs=new Array; //clear
  //for (i=0;i<this.words.length;i++) {
  //  this.defs.push(getDictionary(this.words[i]));
  //}


  //ui output
  var a=this.parentNode.getElementsByClassName('sentence-word');
  var b=this.words;
  if (a.length>b.length) {
    for (i=b.length;i<a.length;i++) {
      this.parentNode.removeChild(a[i]);
    }
  }
  else if (a.length<b.length) {
    for (i=a.length;i<b.length;i++) {
      var div=document.createElement('div');
      div.setAttribute('class','sentence-word');
      div.innerHTML='Word '+(parseInt(i)+1)+': <span class="sentence-word-select"></span><br /><span class="i ib">Guess:</span> <input type="text" class="input-l sentence-guess" /><br /><span class="i ib">Definition:</span> <select class="sentence-definition"></select><br /><span class="i ib">Sentence:</span> <input type="text" class="input-l sentence-sentence" />';
      this.parentNode.appendChild(div);
    }
  }
  // CONFUSING NAMES!! wil lchange in later revisions but for now working is good!
  // loop for every word...
  for (i=0;i<b.length;i++) {
    this.parentNode.getElementsByClassName('sentence-word-select')[i].innerHTML=b[i]; //insert word names
    var c=a[i].parentNode.getElementsByClassName('sentence-definition')[0];
    var defList=getDictionary(this.words[i]); //array of definitions for current word
    // clear all
    for (j=0;j<defList.length;j++) {
      c.innerHTML="";
    }

    //loop through every definition
    for (j=0;j<defList.length;j++) { //translating the arrays into the UI :-|
      // remember: defList[j] -> array (definiton name, part of speech, definition)
      // a is  a list of where the actual word names go
      // b is a list of the words
      // c is the UI definition list
      var item=document.createElement("option");
      item.value=j;
      item.innerHTML=defList[j][0]+": "+defList[j][1]+" "+defList[j][2];
      c.appendChild(item);
    }
  }
}

window.addEventListener("load",function() {
var max=(even_odd==true)?13:12;


var is=document.getElementById('sentence-list');
for (i=0;i<max;i++) {
  var i1=document.createElement('li');
  i1.setAttribute('class','h');
  var i2=document.createElement('li');
  i2.innerHTML='<span contenteditable="true" class="input-lc sentence"></span><br />';
  //i2.innerHTML+='<div class="sentence-word">Word 1: <span class="sentence-word-select"></span><br /><span class="i ib">Guess:</span> <input type="text" class="input-l sentence-guess" /><br /><span class="i ib">Definition:</span> <select class="sentence-definition"><option>n/a</option></select><br /><span class="i ib">Sentence:</span> <input type="text" class="input-l sentence-sentence" /></div>';

  //&nbsp;&nbsp;&nbsp;Word(s): <input type="text" class="input-s sentence-word" /><span class="info">Press ENTER to insert</span>

  if (even_odd==false)
    is.appendChild(i1);
  is.appendChild(i2);
  if (even_odd==true)
    is.appendChild(i1);

  i2.firstChild.addEventListener("blur",sentences,false);
  i2.firstChild.addEventListener("blur",validate,false);
  i2.firstChild.addEventListener("keyup",validate,false);
  i2.words=new Array();

}

},false);
</script>
<style type="text/css">
body {
  font-family:Georgia, 'Times New Roman', serif;
}
.input-l {
  width:400px;
}
.input-lc {
  width:400px;
  -webkit-appearance:textfield;
  padding:1px 0px;
  border:2px inset;
  font:-webkit-small-control;
}
ol#sentence-list li {
  margin:10px 0px;
}
.i {
  text-indent:30px;
}
.ib {
  display:inline-block;
}
.h {
  visibility:hidden;
  height:0px;
}
.info {
  color:grey;
  font-style:italic;
  font-size:84%;
  margin:2px;
}
.container {
  width:850px;
}
</style>
<div class="container">
<hr />
<div style="text-align:center;font-weight:bold">The Word Within the Word - Sentences #<span class="number"></span></div>
<hr />
<ol id="sentence-list">
<!-- inserted dynamically -->

</ol>
</div>
<a href="http://www.Dictionary.com" target="_blank"><img src="http://developers.dictionary.com/images/poweredby/160x35_blue.png" alt="Powered by Dictionary.com" style="border:0px" /></a>